<template>
  <div class="container" v-title data-title="通用充返" >
    <div v-if="!outApp" class="bgcon">
      <div class="bgcontopimg"></div>
      <div class="bgcontop">
        <!-- <div class="type">
          <h2>充值金额</h2>
          <label v-for="item in pushBacks" class="clearfix">
            <input name="pushMoneys" type="radio" v-bind:value="item.pushMoney" v-model="value" />
            <span>充{{item.pushMoney}}元</span><em>送{{item.backMoney}}元</em>
            <i class="selectIcon" v-bind:class="{selected:value == item.pushMoney}"></i>
          </label>
        </div> -->

        <div class="type">
          <h2>充值金额</h2>
          <ul class="typecon clearfix">
            <li v-for="(item, index) in pushBacks" :key="index" v-bind:class="{liseled:valueIndex === index}" @click="chooseValue(index)">
            <div class="lidiv clearfix"><div class="color">充{{item.pushMoney}}元</div><div class="color1">送{{item.backMoney}}元</div></div>
            </li>
          </ul>
        </div>
        <div class="type type1" v-if="!wx_app">
          <h2>支付方式</h2>
          <label><input name="chargeType" type="radio" value="1" v-model="type" />
            <i class="icon-alipay icon"></i>支付宝支付
            <i class="selectIcon" v-bind:class="{selected:type == 1}"></i>
          </label>
          <label><input name="chargeType" type="radio" value="2" v-model="type" />
            <i class="icon-wepay icon"></i>微信支付
            <i class="selectIcon" v-bind:class="{selected:type == 2}"></i>
          </label>
        </div>
        <a v-on:click="sendPayMsg()" class="btn" >支&nbsp;付</a>
      </div>
      <div class="roles">
        <p><span class="icon">01</span>充返活动在APP和小程序的充值活动页参与，充返金额自到账日起2个月内使用有效，逾期清空失效的返现余额。<br/>
          <span class="icon">02</span>充值金额可在“我的钱包”—“充值余额”查看，充返金额在“返现余额”查看。<br/>
          <span class="icon">03</span> 充值金额及充返金额均不可转移、转赠、提现、退还。充值金额可以用于支付&骑行费用&基础服务费&套餐费，充返金额只可用于支付骑行费用。<br/>
          <span class="icon">04</span>骑行扣款优先扣除返现余额，骑行保险费0.2元/次从充值余额中扣除。<br/>
        </p>

      </div>
    </div>
    <!-- <div v-else>
      <div class="thumbnail">
        <img src="../styles/asset/rechargeBackMoney2/banner.png">
      </div>
      <div class="thumbnail" v-on:click="download()">
        <img src="../styles/asset/charge/ss_03.png">
      </div>
    </div> -->
    <simplert ref="simplert"></simplert>
  </div>
</template>

<script>
  var wx = require('weixin-js-sdk');
  import Simplert from '../../components/dialog/dialog.vue'
  let filters = {
    parseURL:function(url) {
      let a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
            if(a.href.split('?').length > 2)
            {
                return false;
            }else{
              let ret = {},
                param = a.href.split('?')[1],
                seg = param.split('&'),
                len = seg.length,
                i = 0,
                s;
              for (; i < len; i++) {
                if (!seg[i]) {
                  continue;
                }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
              }
              return ret;
            }
        })()
      }
    }
  };
  export default {
    data () {
      return {
        id:'',
        type:1,
        value:'',
        valueIndex:0,
        pushBacks: [],
        img: require('../styles/asset/share.jpg'),
        fadeRoles:false,
        outApp:false,
        wx_app:''
      }
    },
    mounted(){
      //native充值结果返回
      window.payResult = (result,msg)=>{
        if(result === 'true' || result == 1)
        {
          let userAgentObj = navigator.userAgent;
          if(userAgentObj.match(/Android/i)){
            window.control.refreshWallet();
          }else if(userAgentObj.match(/iPhone/i))
          {
            refreshWallet();
          }
          this.type = "";
          this.value = "";
          this.open('充值成功！',false,'','','fade_success',function(){});
        }else{
          this.open(msg,false,'','','fade_alert',function(){});
        }
      };
      const that = this;
      const url = window.location.href;


      if(url.indexOf('wx_app')>0){
        this.wx_app = filters.parseURL(url).params.wx_app;
        this.detail = filters.parseURL(url).params.detail;
        if(this.detail == 'true'){
          this.orderId = filters.parseURL(url).params.orderId;
        }
      }else{
        this.wx_app = '';
        if(filters.parseURL(url).params === false){
          // this.outApp = true;
        }
      }

      this.id = filters.parseURL(url).params.id;
      this.$util.getUserToken().then(token=>{
        that.token = token;
        that.getActivity();
      });
      let root = process.env.MAIN_ROOT;
      this.$util.sendShareMessage("六个轮子 | 充返，遇礼季 >>","六个轮子 | 充返，遇礼季 >>", root+this.img,url);
      if(url.indexOf('wx_app')>0){
        let newUrl = this.$util.wxUrl(url);
        // 小程序分享title，url
        wx.miniProgram.postMessage({
          data: {
            title: '充返遇礼季',
            wx_url: newUrl
          }
        })
      }

    },
    components: {
      Simplert
    },
    methods: {
      open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose,message) {
        let obj = {
          title: title,
          useConfirmBtn: confirmBtn,
          customConfirmBtnText: customConfirmBtnText,
          onConfirm:onConfirm,
          type: type,
          onClose:onClose,
          message:message
        }
        this.$refs.simplert.openSimplert(obj)
      },
      download(){
        let userAgentObj = navigator.userAgent;
        if(userAgentObj.match(/Android/i)){
          window.location.href = 'http://app.qq.com/#id=detail&appid=1106220919'
        }else if(userAgentObj.match(/iPhone/i)) {
          window.location.href = "xingjiakejiIOS:///#/activity/getcouponDaily";
          window.setTimeout(function(){
            window.location.href = "https://itunes.apple.com/cn/app/%E7%94%B5%E6%96%91%E9%A9%AC-%E8%AE%A9%E5%87%BA%E8%A1%8C%E6%9B%B4%E5%AE%89%E5%85%A8/id1252928655?mt=8";
          },2000)
        }else{
          window.location.href="http://download.xingjiakeji.com/";
        }
      },
      chooseValue (index) {
        let _this = this;
        this.valueIndex = index;
        this.value = this.pushBacks[_this.valueIndex].pushMoney;
      },
      sendPayMsg(){
        if(!this.wx_app){
          if(!this.type)
          {
            this.open('请选择充值方式！',false,'','','fade_alert',function(){});
            return;
          }
        }
        if(!this.value)
        {
          this.open('请选择充值金额！',false,'','','fade_alert',function(){});
          return;
        }
        if(this.wx_app){
           wx.miniProgram.navigateTo({url: '../user/balance/balance?detail=true&fee='+this.value})
        }else{
          let userAgentObj = navigator.userAgent;
          if(userAgentObj.match(/Android/i)){
            window.control.payMsg(this.type,this.value,this.id);
          }else if(userAgentObj.match(/iPhone/i)) {
            payMsg(this.type,this.value,this.id);
          }
        }

      },
      getActivity(){
        if(!this.token){
            this.outApp = true;
            return false;
        }
        let that = this;
        this.$api.post('/activity/v1/authApi/detail?id='+this.id,'',s=>{
          let rule = s.module.rule;
          that.pushBacks = JSON.parse(rule).pushBacks;
          that.value = this.pushBacks[0].pushMoney;
        },f=>{
          this.open(f.errorMessage);
        },{
          'requestPlatform': that.wx_app,
          "token": this.token
        })
      }
    }
  };
</script>

<style scoped>
@import "../styles/styles.css";
a{ font-size: 14px;}
.container{
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height:100%;
  background: #fff;
}
.bgcon{
  position: relative;

}
.container>div{ width: 100%;}
.thumbnail,.thumbnail>img{ width: 100%;}
.overflow_con{ overflow-y: hidden;}
.bgcontop {
  margin:0 0.2rem;
  padding:4.96rem 0 0.1rem 0;
  border-bottom-right-radius: 0.15rem;
  border-bottom-left-radius: 0.15rem;
  margin-bottom: 0.2rem;
  /*border:0.2rem solid #ff5422;*/
}
.bgcontopimg{
  position: fixed;
  width:100%;
  left:0;
  top:0;
  height:4.98rem;
  background-image: url("../styles/asset/rechargeBackMoney2/banner1.png");
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}
.roles{
    /* word-wrap:normal; */
  margin:0 0.2rem;
  /* border-radius: 0.15rem; */
  padding-top:0.86rem;
  background-image: url("../styles/asset/rechargeBackMoney2/title.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 2.08rem 0.33rem;
}
.bgcontop>div:first-child {
  padding-top:0;
}
.bgcontop>div:first-child h2{
  padding-top:0;
}
.roles p{ line-height: 0.45rem; text-align: left; font-size: 12px;padding:0 0.4rem;padding-bottom:0.56rem;}
.roles> p.tips{ color: #999999; text-align: right; margin-bottom: 0.4rem;}
.roles p .icon{
    position: relative;
    top: 3px;
  display: inline-block;
  width:0.55rem;
  height: 0.3rem;
  line-height: 0.3rem;
  border-radius: 0.3rem;
  background: #ff5d2e;
  padding:0.02rem 0;
  text-align: center;
  color:#fff;
}
.type{ font-size: 14px; padding: 0.35rem 0.22rem 0;}
.type1{
  padding-top:0.1rem;
}
.type span{
  display: inline-block;
  height: 0.4rem;
  float: left;
}
.type em{
  display: inline-block;
  height:0.4rem;
  margin-left:0.16rem;
  padding:0 0.15rem;
  border-radius: 0.32rem;
  border-bottom-left-radius: 0;
  background: #ff524c;
  font-style: normal;
  font-weight: bold;
  color: #ffffff;
  font-size: 12px;
  float: left;
}
.type>label{ padding: 0.2rem 0; display: block; line-height: 0.4rem;}
.type>h2{ font-size: 16px; padding: 0.2rem 0;}
.type input{ display: none;}
.btn{ background: url("../styles/asset/rechargeBackMoney2/zhifuBtn.png") no-repeat; background-size: contain; display: block; width: 5.5rem; margin: 0.2rem auto 0; height: 1.6rem; line-height: 1.34rem; text-align: center; color: #fff; padding: 0;  font-size: 14px;}
.icon{
  background-size: contain;
  width: 0.36rem;
  height: 0.36rem;
  float: left;
  margin-right: 0.2rem;
  background-repeat: no-repeat;
  background-position: center;
}
.icon1{
  width:0.33rem;
  height:0.33rem;
}
.icon-money{ background-image: url("../styles/asset/charge/dollarxin.png")}
.icon-alipay{ background-image: url("../styles/asset/rechargeBackMoney2/alipayxin.png")}
.icon-wepay{ background-image: url("../styles/asset/rechargeBackMoney2/wchatxin.png")}
.selectIcon{background: url("../styles/asset/charge/empty.png") no-repeat; background-size: contain; width: 0.3rem; height: 0.3rem; float: right; margin-top: 0.05rem;}
.selectIcon.selected{ background-image: url("../styles/asset/charge/right.png")}
.typecon {
  padding-top:0.2rem;
  width:110%;
}
.typecon li{
  width:2.5rem;
  height:1.18rem;
  line-height: 1.18rem;
  margin-bottom: 0.17rem;
  background: #fff;
  border-radius: 0.08rem;
  border:0.03rem solid transparent;
  text-align: center;
  font-size: 0;
  float: left;
  background:#f4f4f4;
}
.typecon li:nth-of-type(even){
  margin-left: 0.20rem;
}
.typecon li .lidiv{
  width:100%;
  height:1.18rem;

}
.typecon li .lidiv div{
  display: inline-block;
  height:1.18rem;
  line-height: 1.18rem;
  text-align: center;
  font-size: 14px;
}
.lidiv .color{
    color:#333
}
.typecon li .lidiv .color1{
  display: inline-block;
  height: .42rem;
  margin-left:.1rem;
  padding:0.1rem 0.2rem;
  line-height: .26rem;
  text-align: center;
  font-size: 12px;
  border-radius: .12rem .12rem .12rem 0;
  background:#ff524c;
  color:#fff
}

.typecon .liseled {
  border:0.03rem solid #ff5d2e;
}
@keyframes zoomIn {
  from {
    transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
</style>
